<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<script type="text/javascript" src="../js/getParameter.js" ></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="shortcut icon" href="../img/personIcon1.jpg">
	</head>

	<body>
	<div id="app">
		<main class="pab30">
			<section class="ticketDe picBg mbt30">
				<div class="container">
					<div class="whiteBg mbt30 radius20 pad30">
						<div class="way">取票方式：电子票</div>
						<a href="javascript:void(0)" @click="gotoCode(order.id)" class="ewm clearfix">
							电子票码：{{order.hexhash}}
							<div class="arrow"></div>
							<div class="ewmIcon"></div>
						</a>
					</div>
					<div class="whiteBg mbt30 radius20 pad30">
						<a class="commonTitle" href="javascript:void(0)" @click="gotoGym(order.ticket.gym.id)"><i class="icon"></i>{{order.ticket.gym.name}}<span class="arrow"></span></a>
						<div class="infos">
							<div class="item clearfix">
								<div class="name">票名：</div>
								<div class="txt">{{order.ticket.name}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">票档：</div>
								<div class="txt">¥{{order.ticket.price}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">使用日期：</div>
								<div class="txt">{{order.createtime}}<br></br>--{{order.lastTime}}</div>
							</div>
							<div class="tuipiao" id="tuipiao" v-show="!order.status==1">退票</div>
						</div>
					</div>
					<div class="whiteBg mbt30 radius20 pad30">
						<h3 class="commonTitle"><i class="icon"></i>订单信息</h3>
						<div class="infos">
							<div class="item clearfix">
								<div class="name">订单号：</div>
								<div class="txt">{{order.id}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">购买时间：</div>
								<div class="txt">{{order.createtime}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">电话号码：</div>
								<div class="txt">{{user.phonenum}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">状态：</div>
								<div class="txt txt1" v-show="order.status==0">未使用</div>
								<div class="txt txt2" v-show="order.status==1">已退票</div>
								<div class="txt txt3" v-show="order.status==2">已核销</div>
							</div>
						</div>
					</div>
					<div class="whiteBg radius20 pad30">
						<h3 class="commonTitle"><i class="icon"></i>温馨提示</h3>
						<div class="commontext">
							{{order.ticket.gym.note}}
						</div>
					</div>
				</div>
			</section>
			<section class="tuipiaoTc">
				<div class="mask"></div>
				<div class="flexBox">
					<div class="box">
						<div class="title">退票</div>
						<form action="" method="" class="tuipiaoForm">
							<select class="formSelect mbt30" name="reson">
								<option value="1">理由理由理由理由理由理由</option>
								<option value="2">理由理由理由理由理由理由</option>
								<option value="3">理由理由理由理由理由理由</option>
								<option value="4">理由理由理由理由理由理由</option>
								<option value="5">理由理由理由理由理由理由</option>
							</select>
							<textarea class="formText" placeholder="备注" name="beizhu"></textarea>
							<button type="button" @click="tui" class="subBtn">提交申请</button>
						</form>
						<div class="close" id="tpClose"></div>
					</div>
				</div>
			</section>
			<main class="pab120">
				<div class="asideBox">
					<div class="container">
						<a class="asideBtn" @click="sendContent()" href="#" v-show="order.status==2&&order.contenttype==0" >去评论</a>
						<a class="asideBtn" @click="lookContent()" href="#" v-show="order.status==2&&order.contenttype==1" >已评论</a>
					</div>
				</div>
			</main>
		</main>
	</div>

	<script>
		let app1=new Vue({
			el:"#app",
			data:{order:{},
			user:{}},
			methods:{
				findUser(){
					const _this=this;
					let uid=this.order.bookerid;
					axios.get("/user/find/"+uid)
					.then(function(response){
						console.log(response);
						_this.user=response.data;
					});
				},
				find(){
					const _this=this;
					axios.get("/ticket/findGymTicketByOid",{
						params:{
							oid:getParameter("oid")
						}
					})
					.then(function(response){
						console.log(response);
						_this.order=response.data;
						_this.findUser ();
					});

				},
				gotoGym(id){
					location.href="/userclient/profile.html?gid="+id;
				},
				gotoCode(id){
					location.href="/userclient/qcode.html?oid="+id;
				},
				tui(){
					const _this=this;
					axios.get("/ticket/tui",{params:{id:_this.order.ticketid,time:_this.order.booktime}}).then(function (response){
						if(!response.data){
							layer.msg("退票失败，场馆开始前8小时以后拒绝退票，如有疑惑，请联系管理员！");
						}else {
							axios.get("/ticket/tuiById",{
								params:{
									id:_this.order.id
								}
							})
									.then(function(response){
										console.log(response);
										history.go(-1);
									});
						}
					})
				},
				sendContent(){
					location.href="/userclient/sendContent.html?gid="+app1.order.ticket.gym.id+"&oid="+app1.order.id;
				},
				lookContent(){
					layer.msg("请勿重复评论");
				}
			},
			created(){
				this.find();
				// this.findUser();
			}
		});
	</script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>

</html>